<template>
	<view>
		<view class="nav">
			<!-- 左侧 -->
			<view class="nav-left">
				<scroll-view scroll-x scroll-y scroll-with-animation :style="[{'height': containerHeight + 'px'}]">
					<left-tree :data="hazard.tree" @clickTreeNode="clickTreeNode"></left-tree>
				</scroll-view>
			</view>

			<!-- 右侧 -->
			<view class="nav-right">
				<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="uni-list">
						<checkbox-group @change="checkboxChange">
							<label class="uni-list-cell" v-for="item in list" :key="item.riskControlId">
								<view>
									<checkbox :value="item.riskControlId" style="transform:scale(0.7)" />
								</view>
								<view>
									<view class="item-content">
										<view class="item-detail">危险点：<strong>{{ item.risk }}</strong></view>
										<view class="item-detail">预控措施：{{ item.controlMeasure }}</view>
									</view>
								</view>
							</label>
						</checkbox-group>
					</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import LeftTree from './left-tree.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getHazardEvaluation } from '@/api/business/ticket.js'

	export default {
		mixins: [MescrollMixin],
		components: {
			LeftTree
		},
		props: {
			hazard: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				containerHeight: 0,
				list: [],
				checkedList: [],
				hazardText: "",
				hazardLevel: ""
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					const windowHeight = res.windowHeight // 可使用窗口高度
					this.containerHeight = windowHeight
				}
			})
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let params = {
					risk: this.hazardText,
					riskLevelNo: this.hazardLevel,
					treeId: this.hazard.id,
					status: 0,
					size: page.size,
					current: page.num
				}

				getHazardEvaluation(params).then(res => {
					let curPageData = res.data.records
					let curPageLen = curPageData.length
					let totalSize = res.data.total
					//设置列表数据
					if (page.num == 1) this.list = [] //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData) //追加新数据

					this.mescroll.endBySize(curPageLen, totalSize)
				})
			},
			clickTreeNode(node) {
				this.list = []
				this.hazard.id = node.key
				this.mescroll.resetUpScroll()
			},
			checkboxChange(e) {
				let items = this.list
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (e.detail.value.includes(item.riskControlId)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			getCheckedList() {
				this.checkedList = []
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].checked) {
						this.checkedList.push(this.list[i]);
					}
				}
				return this.checkedList
			},
			listFilter(fliterData) {
				this.hazardText = fliterData.risk
				this.hazardLevel = fliterData.riskLevel
				this.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		width: 100%;
		background-color: #fff;
	}

	.nav-left {
		position: fixed;
		width: 40%;
		border-right: 1px solid #F1F1F1;
	}

	.nav-right {
		width: 60%;
		margin-left: 40%;
	}

	/deep/ uni-radio .uni-radio-input {
		width: 14px;
		height: 14px;
	}

	.uni-list-cell {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ebedf0;
		padding: 5px 0;
		padding-left: 2px;
	}

	.item-content {
		width: 100%;
	}

	.item-detail {
		line-height: 24px;
		font-size: 12px;
	}
</style>
